import { Button } from 'antd'
import React, { useEffect, useState } from 'react'
import sun from '../../assets/images/day-model.svg'
import moon from '../../assets/images/night-model.svg'
import noProblems from '../../assets/images/answer-model.svg'
import problems from '../../assets/images/answer-icon.svg'
import { useTranslation } from 'react-i18next'
import TimeFormat from '../../utils/TimeForm'
import { useNavigate } from 'react-router-dom'
function OtherFunction() {
  const {t}=useTranslation()
  const navigate=useNavigate()
  const [flag,setFlag]=useState(true)
   const [isWhite,setIsWhite]=useState(()=>{
            const saved = localStorage.getItem('theme')
         return saved ==='white'|| (!saved&&window.matchMedia('(prefers-color-scheme:dark)').matches)
         
        })
            
        useEffect(()=>{
            document.documentElement.className=isWhite ? 'white-theme ':'blue-theme'
             localStorage.setItem('theme',isWhite?'white':'blue')
             window.dispatchEvent(new Event('local-storage-change'));
        },[isWhite])

     // 监听 localStorage 变化（包括当前页面和跨标签页）
  useEffect(() => {
    // 1. 定义更新状态的函数
    const updateTheme = () => {
      setIsWhite(localStorage.getItem('theme') === 'white');
    };

    // 2. 初始化主题状态
    updateTheme();

    // 3. 监听当前页面的自定义事件（手动触发）
    const handleLocalChange = () => updateTheme();
    window.addEventListener('local-storage-change', handleLocalChange);

    // 4. 监听其他标签页的 storage 事件
    window.addEventListener('storage', updateTheme);

    // 清理事件监听
    return () => {
      window.removeEventListener('storage', updateTheme);
      window.removeEventListener('local-storage-change', handleLocalChange);
    };
  }, []);

    
        //进入聊天页面 
        const goChat=()=>{
           setFlag(!flag)
            navigate('/layout/chat')
        }

  return (
    <div style={{
    width:'600px',
    height:'50px',
    display:'flex',
    justifyContent:'space-around',
    alignItems:'center',
    fontSize:'18px'
    }}>
        
        <p >{t('solve')}</p>

         <img onClick={()=>goChat()} src={flag ? noProblems:problems}  alt="" style={{width:'50px',height:'50px',cursor:'pointer'}} />
          
             <img src={isWhite ? sun:moon}  onClick={()=>setIsWhite(!isWhite)} alt=""  style={{width:'50px',height:'50px',cursor:'pointer'}}/>
          
          <TimeFormat   
        date={new Date()}
        format='YYYY/MM/DD'
       />
         
    </div>
  )
}

export default OtherFunction
